<template>
  <a-space direction="vertical" :size="16" fill>
    <a-card
      class="general-card"
      title="数据总览"
      :header-style="{ paddingBottom: '12px' }"
    >
      <a-grid :cols="24" :col-gap="12" :row-gap="12">
        <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
          <ChainItem
            title="车间总数"
            :value="titleCommonInfo.workTotal"
            quota="visitors"
            chart-type="line"
            :card-style="{
              background: isDark
                ? 'linear-gradient(180deg, #284991 0%, #122B62 100%)'
                : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
            }"
          />
        </a-grid-item>
        <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
          <ChainItem
            title="分组总数"
            :value="titleCommonInfo.groupTotal"
            quota="published"
            chart-type="bar"
            :card-style="{
              background: isDark
                ? ' linear-gradient(180deg, #3D492E 0%, #263827 100%)'
                : 'linear-gradient(180deg, #F5FEF2 0%, #E6FEEE 100%)',
            }"
          />
        </a-grid-item>
        <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
          <ChainItem
            title="品温监控总数"
            quota="comment"
            :value="titleCommonInfo.tempTotal"
            chart-type="line"
            :card-style="{
              background: isDark
                ? 'linear-gradient(180deg, #294B94 0%, #0F275C 100%)'
                : 'linear-gradient(180deg, #f2f9fe 0%, #e6f4fe 100%)',
            }"
          />
        </a-grid-item>
      </a-grid>
    </a-card>
  </a-space>
</template>

<script lang="ts" setup>
import ChainItem from './chain-item.vue';
import useThemes from '@/hooks/themes';

const { isDark } = useThemes();

const props = defineProps({
  titleCommonInfo: {
    type: Object,
  },
});
</script>

<style scoped lang="less">
</style>
